<template>
    <div class="recommend">
        <div class="header">
            <div class="header-left">
                推荐活动
            </div>
            <div class="header-right">        
                广州
                <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem;vertical-align:-0.08rem">
                    <use xlink:href="#icon-dizhi"></use>
                </svg>
            </div>
        </div>
        <div class="re-container">
            <group class="re-item" tag="div" v-for="item of actList" :key="item.id" @click.native="handleToLink(item.id)">
                <act-one :Actitem="item"></act-one>
                <!-- <div class="re-item__bannerBox">
                    <div class="re-item__banner" :style="{backgroundImage:'url('+item.actcoverimage+')'}">
                        <div class="re-item__label" 
                            :style="{
                                backgroundColor: item.label===1?'#ff7d6a':item.label===2?'#acd60a':'#acd60a'
                            }"
                        >
                            <svg class="icon cell_icon" 
                                aria-hidden="true" 
                                slot="icon" 
                                :style="{
                                    width : item.act_label_id===1?'.28rem':item.act_label_id===2?'.32rem':'.28rem',
                                    height : item.act_label_id===1?'.28rem':item.act_label_id===2?'.32rem':'.28rem',
                                    marginRight : '0',
                                    verticalAlign : item.act_label_id===1?'-.04rem':item.act_label_id===2?'-.06rem':'-.04rem',
                                }"
                            >
                                <use :xlink:href="item.act_label_id===1?'#icon-remenx':item.act_label_id===2?'#icon-mianfei':'#icon-guanfangwangzhan'"></use>
                            </svg>
                            {{item.act_label_id===1?'推荐':item.act_label_id===2?'免费':'官方'}}
                        </div>
                    </div>
                </div>
                <p class="re-item__title">{{item.acttitle}}</p>
                <p class="re-item__content">{{item.content}}</p>
                <cell :title="item.time">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.38rem;height:.38rem">
                        <use xlink:href="#icon-shijian-tianchong"></use>
                    </svg>
                    <div>
                        <span style="color: #ff721f">{{item.timeTips}}</span>
                    </div>
                </cell>

                <cell is-link value="地图">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.5rem;height:.5rem;margin-left:-.06rem">
                        <use xlink:href="#icon-dizhi"></use>
                    </svg>
                    <span slot="title">
                        <p style="vertical-align:middle;">{{item.address}}</p> 
                        <p style="vertical-align:middle;color:#ccc">{{item.addressDetail}}</p> 
                    </span>
                </cell>
                <cell :title="'限'+item.limit+'人报名 剩余'+item.applyLeft+'人'">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.42rem;height:.42rem">
                        <use xlink:href="#icon-sangeren"></use>
                    </svg>
                    <div>
                        <span style="color: #ff721f">已报名：10人</span>
                    </div>
                </cell>
                 <cell :title="'由'+item.organizer+'承办'" :value="'好评率:'+item.goodRate+'%'">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.45rem;height:.45rem">
                        <use xlink:href="#icon-ai246"></use>
                    </svg>
                    
                </cell>
                <cell :title="'￥'+item.money+'起'" :value="'赠品:'+item.gift">
                    <svg class="icon cell_icon" aria-hidden="true" slot="icon" style="width:.36rem;height:.36rem;margin-left:.03rem;">
                        <use xlink:href="#icon-qian"></use>
                    </svg>
                </cell> -->
            </group>
        </div>
    </div>
</template>

<script>
import { Group , Cell } from 'vux'
import ActOne from './Actone'
export default {
    name: "HomeRecommend",
    components: {
        Group,
        Cell,
        ActOne
    },
    props: {
        actList: Array
    },
    mounted () {
        if(!this.actList){
            this.list = this.actList
        }
    },
    data () {
        return {
            list: null
            // list: [{
            //     id: '001',
            //     imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530018708094&di=a42a0e3f885fe52438e10944a8d78d39&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F42%2F25%2F02bOOOPIC95_1024.jpg',
            //     title: '走进中山大学创新创业学院资源对接会',
            //     content: '大苏打难得看到卡扩散到卡萨诺的看书看就打你卡上今年大大撒开电脑卡是你的借口三大矿山打卡时间的那是觉得那是看见你多久啊是哪款',
            //     time: '2018-06-26 14:00 至 15:30',
            //     timeTips: '五天后开始',
            //     city: '陕西·西安',
            //     location: '西安市长安区文员北路长安文化中心一层',
            //     limit: 30,
            //     applyLeft: 5,
            //     money: 100,
            //     gift: '100虚拟币',
            //     organizer: '南湖国旅',
            //     goodRate: 99,
            //     label: 1
            // },{
            //     id: '002',
            //     imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530426040696&di=78c9fe7377ff9309555cfa108dc2987f&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F13%2F67%2F98B58PICGe8_1024.jpg',
            //     title: '大苏打自行车发布会',
            //     content: '大苏打难得看到卡扩散到卡萨诺的看书看就打你卡上今年大大撒开电脑卡是你的借口三大矿山打卡时间的那是觉得那是看见你多久啊是哪款',
            //     time: '2018-06-26 14:00 至 15:30',
            //     timeTips: '五天后开始',
            //     city: '广东·江门',
            //     location: '江门市万达广场3楼',
            //     limit: 30,
            //     applyLeft: 5,
            //     money: 100,
            //     gift: '100虚拟币',
            //     organizer: '南湖国旅',
            //     goodRate: 99,
            //     label: 2
            // }]
        }
    },
    methods: {
        handleToLink (id) {
            this.$router.push('/detail/'+id)
        }
    },
    computed: {
        
    }
}
</script>

<style lang="stylus" scoped>
.weui-cell
    &:before
        border-top: 0
    padding: .2rem 0

.recommend
    padding-bottom: .8rem
    .header
        background: #fff  
        color: #333
        line-height: .78rem
        height: .78rem
        font-size: .3rem
        border-bottom: 1px solid #ececec
        box-sizing:border-box
        box-shadow: 0 0 3px rgba(238,238,238,0.1)
        .header-left
            float: left
            &:before
                content: ''
                float: left
                width: .06rem
                height: .22rem
                background-color: #ed722e
                margin-right: .20rem
                margin-top: .25rem
        .header-right
            min-width: 1.04rem
            float: right
            text-align: center
            font-size: .26rem
            color: #ccc

    .re-item >>> .weui-cell
        padding: .1rem 0
        &:before
            border-top: 0 
    .re-item >>> .weui-cells
        font-size: 0.26rem
        margin-top: 0
        &:after
            border-bottom: 0
        &:before
            border-top: 0
    .re-item >>> .vux-label
        font-size: 0.26rem

    .re-item
        padding: .3rem
        background: #fff
        padding-bottom: .4rem
        margin-bottom: .2rem
        // .re-item__bannerBox
        //     width: 100%
        //     border-radius: .1rem
        //     .re-item__label
        //         width: 1.2rem
        //         height: .4rem
        //         line-height: .4rem
        //         margin-top: .1rem  
        //         text-align: center
        //         border-radius: 0  .2rem .2rem 0  
        //         color: #fff
        //         font-size: 0.12rem
        //     .re-item__banner
        //         width:100%
        //         height:0
        //         padding-bottom: 45%
        //         overflow:hidden
        //         background-position: center center
        //         background-repeat: no-repeat
        //         -webkit-background-size:cover
        //         -moz-background-size:cover
        //         background-size:cover
        //         border-radius: .1rem
        // .re-item__title
        //     line-height: .8rem
        //     font-size: 14px
        //     font-weight: 600
        // .re-item__content
        //     line-height: .38rem
        //     font-size: 12px
        //     color: #ccc
        //     margin-bottom: .1rem
        // .cell_icon
        //     margin-right: .2rem
        //     vertical-align: -.05rem




</style>